import React from "react";
import { JumboTabs } from "antd-mobile";
import "./Goods.less";
import {Link} from "react-router-dom"
import { $pre } from "../../../../http/http";
import { filterPrice } from "../../../../filters";
export default function Goods(props) {
  let { goods,n,onChangeN } = props;
  let navs = ["时令水果", "新鲜蔬菜", "肉食蛋品","粮油调味"];
  return (
    <div className="goods">
      <JumboTabs defaultActiveKey={n+''} onChange={key=>onChangeN(key)}>
        {navs.map((item,index) => {
          return (
            <JumboTabs.Tab title={item} key={index+''}>
              {goods.length > 0 ? (
                <div>
                  {goods[n].content.map((i) => {
                    return (
                      <Link to={'/detail/'+i.id} className="card" key={i.id}>
                        <img src={$pre + i.img} alt="" />
                        <div className="right">
                          <h3>商品名称：{i.goodsname}</h3>
                          <div>价格：{filterPrice(i.price)}</div>
                        </div>
                      </Link>
                    );
                  })}
                </div>
              ) : (
                <div>暂无数据</div>
              )}
            </JumboTabs.Tab>
          );
        })}
      </JumboTabs>
    </div>
  );
}
